<template>
  <div id="updateDormitoryDialog">
    <el-dialog title="新增" :visible.sync="updateDormitoryDialogVisible" width="300px" :before-close="close">
      <el-form :model="updateDormitoryForm" ref="updateDormitoryForm" label-width="80px" label-position="left" :rules="rules">
        <el-form-item label="寝室名称" prop="name">
          <el-input v-model="updateDormitoryForm.name" placeholder="请输入楼栋名称" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" >
          <el-select v-model="updateDormitoryForm.gender" placeholder="请选择性别" @change="getBuildingOptions" disabled style="width: 180px">
            <el-option
              v-for="item in genderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋名称" prop="buildingId">
          <el-select v-model="updateDormitoryForm.buildingId" placeholder="请选择楼栋" disabled style="width: 180px">
            <el-option
              v-for="item in buildingOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="床位"  prop="bedNum">
          <el-input v-model="updateDormitoryForm.bedNum" placeholder="请输入床位" style="width: 180px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="updateDormitory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import building from '../../api/dormitory/building';
  import dormitory from "../../api/dormitory/dormitory";
  export default {
    name: 'updateDormitoryDialog',
    props: ['updateDormitoryDialogVisible', 'updateDormitoryForm','buildingOptions'],
    data() {
      return {
        genderOptions: [
          {
            label: '男',
            value: 0
          },
          {
            label: '女',
            value: 1
          }
        ],
        masterOptions:[],
        rules: {
          name: [
            { required: true, message: '请输入寝室名', trigger: 'blur' },
            { max: 10, message: '长度小于10字符', trigger: 'blur' }
          ],
          buildingId: [
            { required: true, message: '请选择所属楼栋', trigger: 'change' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          bedNum: [
            { required: true, message: '请输入床位', trigger: 'change' }
          ]
        }
      }
    },
    created() {
    },
    methods: {
      /*楼栋选项*/
      getBuildingOptions(){
        building.getBuildingByGender(this.updateDormitoryForm.gender).then(res => {
          this.buildingOptions = res.data
        })
      },
      /*获取请示*/
      getBuilding() {
        building.getBuildingByGender(this.updateDormitoryForm.gender).then(result => {
          this.buildingOptions = result.data
        })
      },
      /*修改寝室信息*/
      updateDormitory() {
        this.$refs["buildingForm"].validate(valid => {
          if (valid){
            dormitory.updDormitory(this.updateDormitoryForm).then(()=>{
              this.$message.success("修改成功")
              this.$parent.getDormitory()
              this.close()
            })
          }else {
            this.$message.error("请正确填写信息")
          }
        })
      },
      /*关闭dialog*/
      close() {
        this.$refs['updateDormitoryForm'].resetFields()
        this.$parent.closeDialog()
      }
    }
  }
</script>

<style scoped>

</style>
